<template>
  
  <div class="container" :style="{height: containerHeight}">
    <div class="left-tools">
      <div class="logo" style="">
        <img src="../../assets/images/deecp-ai.png" style="width:180px;">
      </div>
      <div class="title">专业的股票分析与交易学习平台</div>

      <div class="auth-desc">
        <div class="remaining-talks">剩余次数：
          <span id="remainingTalksCount" style="color: rgb(231, 76, 60);">{{remainChartCount}}</span>
          次
        </div>
        <div class="free-talks-note">会员每天免费对话5次</div>
        <div class="purchase-options-header">购买对话次数</div>
        <div class="purchase-links">
          <a href="#" class="purchase-link" title="购买100次对话" @click="goorderpage">{{chatCombo.count}}次 / ¥ {{ chatCombo.jiage }}</a>
        </div>
      </div>

      <div class="stock-one" style="margin-bottom: 25px;">
        <div :class="{'agent-item':true, 'stock':true, 'active': selectStockItem=='one'} " @click="toggleBand('one')"
            data-agent="stock" style="--agent-color: #e74c3c;">
            <div class="agent-header">
                <div class="agent-avatar">💹</div>
                <div class="agent-info">
                    <div class="agent-name">智能股票分析师</div>
                    <div class="agent-category">数据分析</div>
                </div>
            </div>
            <div class="agent-desc">基于Deecp平台数据和AI大模型，为您提供专业的股票筛选、技术分析和投资建议</div>
            <div class="agent-features">
                <span class="feature-tag">最新数据</span>
                <span class="feature-tag">智能分析</span>
                <span class="feature-tag">风险评估</span>
            </div>
        </div>

      </div>

      <div class="stock-two">
        <div :class="{'agent-item':true, 'course':true, 'active': selectStockItem=='two'} "  @click="toggleBand('two')"
          data-agent="course" style="--agent-color: #3498db;">
            <div class="agent-header">
                <div class="agent-avatar">🎓</div>
                <div class="agent-info">
                    <div class="agent-name">交易导师</div>
                    <div class="agent-category">课程学习</div>
                </div>
            </div>
            <div class="agent-desc">基于AI整合大师课程内容，为您提供个性化的交易策略学习和答疑解惑</div>
            <div class="agent-features">
                <span class="feature-tag">课程问答</span>
                <span class="feature-tag">心理辅导</span>
                <span class="feature-tag">策略解析</span>
            </div>
        </div>

      </div>
    </div>
    <div class="right-chart">
      <div class="chat-area" style="position: relative;">
            <div class="chat-header">
                <div class="current-agent">
                    <div class="current-agent-avatar stock" id="currentAvatar" v-if="selectStockItem=='one'">🤖</div>
                    <div class="current-agent-avatar course" id="currentAvatar" v-if="selectStockItem=='two'">🎓</div>
                    <div class="current-agent-info">
                        <h3 id="currentName">
                          <span v-if="selectStockItem=='one'">智能股票分析师</span>
                          <span v-if="selectStockItem=='two'">交易导师</span>
                        </h3>
                        <p id="currentDesc">
                          <span v-if="selectStockItem=='one'">基于Deecp平台数据和AI大模型，为您提供专业的股票筛选、技术分析和投资建议</span>
                          <span v-if="selectStockItem=='two'">基于AI整合大师课程内容，为您提供个性化的交易策略学习和答疑解惑</span>
                        </p>
                    </div>
                    <div class="status-indicator"></div>
                </div>
            </div>
            <div class="chat-messages" id="chatMessages" ref="chatMessagesEl">

            </div>
            <div id="typingIndicatorContainer" style="display: none;position: absolute;bottom:100px;left:20px" ref="typingIndicatorContainerEl"></div>
            <div class="chat-input-area">
                <div class="input-container">
                    <div class="input-wrapper">
                        <input id="chatInput" v-model="inputMessage" 
                          class="chat-input" placeholder="问我关于股票分析的问题..." rows="1" style="height: auto;"
                          @input="handleClearButtonVisibility" @keyup.enter = "sendMessage"/>
                        <button class="clear-input-btn" id="clearInputButton" ref="clearInputButtonEl" @click="clearInputMessage" title="Clear input" 
                          style="opacity: 0; pointer-events: none;">×</button>
                    </div>
                    <button id="sendButton" class="send-button" :title="remainChartCount==0?'请购买聊天包':'发送'" @click="sendMessage" :disabled="btDisabled">
                        <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path></svg>
                    </button>
                </div>
            </div>
        </div>
    </div>

        <!-- 订单抽屉-->
   <a-modal
        centered="true"
        :footer="null"
        width="40%"
        :closable="false"
        :maskClosable="false"
        v-model:visible="visibleD"
        :destroyOnClose="true"
        :after-visible-change="afterVisibleChange">
      <template #title>
          <span style="font-weight: 500; font-size:16px;padding:8px;">订单支付</span>
      </template>
      <OrdercrateAndPay ref="orderRef"  :preorderInfo="preorderInfo"  :status="status"  @changeorderstatus="changeorderstatus" @orderpaysuccess="orderpaysuccess"/>
  </a-modal>
  </div>
</template>

<script lang="ts">
  import { Modal } from 'ant-design-vue';
  import showdown from 'showdown';
  import en from '/@/locales/lang/en';
  import { nextTick } from 'vue';
  export default defineComponent({
    components: {
      AModal: Modal
    }
  })
</script>

<script lang="ts" setup>
  import { ref, onMounted, onUnmounted, computed, defineComponent} from 'vue';
  import { ailist,jianAicount} from '/@/api/dp/dpbaseapi';
  import { getUserCartList,clearallUserCart,removeCartById ,precreateOrder } from '/@/api/dp/dpbaseapi';
  import OrdercrateAndPay from '/@/views/dp/userorder/ordercreate.vue';
  import { getCurrentUserId } from '../../utils/currentUser.ts';

  const selectStockItem = ref('');
  const messageContentRef = ref();
  const chatMessagesEl = ref();
  const inputMessage = ref('');
  const clearInputButtonEl = ref();
  const typingIndicatorContainerEl = ref();
  const containerHeight = ref('100%');
  const items=ref([]);
  const btDisabled= ref(true)
  const isCharting = ref(false)
  const chatCombo=ref({});
  const aicount=ref(0);
  const usagecount = ref(0);
  const freecount = ref(0);

  const orderRef = ref();
  const visibleD = ref<boolean>(false);
  const status=ref(0);
  const preorderInfo=ref({});
  let isAiTyping = false;
  const end = ref('')


  const converter = new showdown.Converter();
  const agents = {
      stock: { name: '智能股票分析师', avatar: '🤖', desc: '基于Deecp平台数据和AI大模型，为您提供专业的股票筛选、技术分析和投资建议', greeting: '您好！我是Deecp智能股票分析师，拥有最新的市场数据和AI分析能力。请告诉我您想了解哪只股票或者哪几只股票？', type: 'stock', color: '#e74c3c' },
      course: { name: '交易导师', avatar: '🎓', desc: '基于AI整合大师课程内容，为您提供个性化的交易策略学习和答疑解惑', greeting: '欢迎来到Deecp交易学院！我是您的专属交易导师，精通各类交易策略和技术分析。请问您想学习哪个方面的交易知识？', type: 'course', color: '#3498db' }
  };
  const ws = ref();
  const char_index = ref(0);
  const full_context = ref('')

  const remainChartCount = computed(()=>{
    let count = aicount.value;
    if(freecount.value>0 && usagecount.value<freecount.value) {
      count+=freecount.value - usagecount.value;
    }
    return count
  });



  async function getAiList() {
    const res= await ailist();
    console.log('res', res)
    if(res.list && res.list.length>0) {
      chatCombo.value=res.list[0]; 
    }
    aicount.value=res.aicount;
    freecount.value = res.freecount;
    usagecount.value = res.usagecount
  } 

  function initWebsocket(callback) {
    ws.value = new WebSocket("/js/a/dify/"+getCurrentUserId())
    ws.value.onopen = ()=>{
      callback&&callback();
    }
    ws.value.onclose = ()=>{
      // char_index.value = 0;
      // isCharting.value = false;
      // full_context.value = '' 
    }

    ws.value.onmessage = (message)=>{
      let data = message.data;
      data = data.replace('\n\n', 'θθ')
      data = data.replace('\n', 'θ')
      data = data.replace('\_', '_')
      full_context.value = full_context.value + data;
      console.log(data)
      if(char_index.value==0) {
        jianAicount().then(res => {
          if(res['result']=='true') {
            if(freecount.value>0 && usagecount.value<freecount.value) {
              freecount.value = freecount.value - 1
            } else {
              aicount.value = aicount.value -1
            }
          }
        });
      }
      if(data=='θ===end===θ') {
        end.value = '-'
      }
      if(!isCharting.value || char_index.value==0) {
        end.value = ''
        isCharting.value = true
        appendAiResponse()
      }

    }

    ws.value.onerror = (error)=> {
      console.log('websocket', error)
      char_index.value = 0;
      isCharting.value = false;
      full_context.value = '' 
      setSendBtDisableStatus();
    }

  }

    function scrollToBottom() {
      chatMessagesEl.value.scrollTop = chatMessagesEl.value.scrollHeight;
    }

    function showTypingIndicator() {
        if (isAiTyping) 
          return;
        isAiTyping = true;
        let currentAgent = selectStockItem.value=='one'?'stock':'course';
        if (chatMessagesEl.value.querySelector('.welcome-message')) { chatMessagesEl.value.innerHTML = ''; }
        const agent = agents[currentAgent];
        typingIndicatorContainerEl.value.innerHTML = `<div class="typing-indicator"><div class="message-avatar ${agent.type}">${agent.avatar}</div><div class="typing-indicator-dots"><span></span><span></span><span></span></div></div>`;
        typingIndicatorContainerEl.value.style.display = 'block';
        typingIndicatorContainerEl.value.scrollIntoView({ behavior: 'smooth', block: 'end' });
    }

    function hideTypingIndicator() {
        isAiTyping = false;
        typingIndicatorContainerEl.value.style.display = 'none';
        typingIndicatorContainerEl.value.innerHTML = '';
    }

    let tmp = ''

    function appendAiResponse() {
      
      if(!isCharting.value)
        return;
      
      let currentAgent = selectStockItem.value=='one'?'stock':'course';
      if(char_index.value==0) {
        tmp = ''
        hideTypingIndicator(); 
        addMessageToUI('ai', '', agents[currentAgent].avatar, agents[currentAgent].type, false);
      }

      if (char_index.value < full_context.value.length) {
        let messageAiEles = chatMessagesEl.value.querySelectorAll('.message.ai');

        let messageContentEl;
        if(messageAiEles && messageAiEles.length>0) {
          let lasetMessageAiEle = messageAiEles[messageAiEles.length -1];
          let messageContentEls = lasetMessageAiEle.getElementsByClassName('message-content')
          messageContentEl = messageContentEls[messageContentEls.length -1]
        }
        let char = full_context.value.charAt(char_index.value);
        let enter = false
        if(char=='θ') {
          char = ' \n '
          enter = true;
        }
        let showText = tmp + char;
        tmp = showText;

        if(!messageContentEl) {
          addMessageToUI('ai', showText, agents[currentAgent].avatar, agents[currentAgent].type, false);
        } else {
          messageContentEl.innerHTML = converter.makeHtml(showText)
        }
        
        char_index.value = char_index.value + 1;
        if (enter) {
          nextTick(()=> {
            scrollToBottom()
          });
        }
        if(char_index.value%20==0) {
          scrollToBottom();
        }
        setTimeout(appendAiResponse, 1000/50);  // 打字机速度控制
      } else {
          if(tmp.indexOf('===end===')>0) {
            scrollToBottom();
            isCharting.value = false;
            setSendBtDisableStatus();
          } else {
            setTimeout(appendAiResponse, 1000/50);  // 打字机速度控制
          }
      }
    }

    function setSendBtDisableStatus(){
      btDisabled.value = false;
      if(isCharting.value) {
        btDisabled.value = true;
      }
      if(!inputMessage.value || inputMessage.value.length==0) {
        btDisabled.value = true;    
      }
      if(remainChartCount.value==0) {
        btDisabled.value = true;
      }
    }

  async function sendMessage() {
    setSendBtDisableStatus()
    if(btDisabled.value==true){
      return;
    }
    isCharting.value = true;
    char_index.value = 0;
    full_context.value = '';

    addMessageToUI('user', inputMessage.value, '👤', 'user', false); 
    showTypingIndicator();

    // 减次数
    if(ws.value.readyState!=WebSocket.OPEN) {
      initWebsocket(()=>{
        ws.value.send(inputMessage.value)
        clearInputMessage()
      });
    } else {
        ws.value.send(inputMessage.value)
        clearInputMessage()
    }

  }

    function addMessageToUI(type, content, avatar = null, agentType = null, removeHistory = false) {
      let currentAgent = selectStockItem.value=='one'?'stock':'course';
      if (removeHistory) { chatMessagesEl.value.innerHTML = ''; }
      const messageDiv = document.createElement('div');
      messageDiv.className = `message ${type}`;
      const avatarDiv = document.createElement('div');
      avatarDiv.className = `message-avatar ${agentType || agents[currentAgent].type}`;
      avatarDiv.textContent = avatar || (type === 'ai' ? agents[currentAgent].avatar : '👤');
      const contentDiv = document.createElement('div');
      contentDiv.className = 'message-content';
      contentDiv.textContent = content; 
      messageDiv.appendChild(avatarDiv);
      messageDiv.appendChild(contentDiv);
      chatMessagesEl.value.appendChild(messageDiv);
      messageDiv.scrollIntoView({ behavior: 'smooth', block: 'end' });
  }


  function toggleBand(band){
      if(band!=selectStockItem.value) {
        isCharting.value = false;
        clearInputMessage();
        selectStockItem.value = band
        var messageContent = document.createElement('div')
        messageContent.className = 'message-content';
        let currentAgent = selectStockItem.value=='one'?'stock':'course';
        addMessageToUI('ai', agents[currentAgent].greeting, agents[currentAgent].avatar, agents[currentAgent].type, true);
      }
  }
  function handleClearButtonVisibility() {
      clearInputButtonEl.value.style.opacity = inputMessage.value.trim() !== '' ? '1' : '0';
      clearInputButtonEl.value.style.pointerEvents = inputMessage.value.trim() !== '' ? 'auto' : 'none';
      setSendBtDisableStatus()
  }

  function clearInputMessage(){
    inputMessage.value = '' 
    handleClearButtonVisibility()
    setSendBtDisableStatus()
  };

  async function goorderpage ()  {
      //构建数据
      status.value=0;
      
      let arrs:any=[];
      let data = {
          ordertype:'3',
          typeid:chatCombo.value?.id,
          shuliang:1
      }
      arrs.push(data);
      console.log('data:', arrs)
      let  orderobj={
          title:'聊天包购买',
          orderdetails:arrs
       };
     
      //查询订单 
    
     const preinfo= await precreateOrder(orderobj);
     preorderInfo.value=preinfo;

     visibleD.value = true;
     
  };
  function orderpaysuccess(){
       visibleD.value = false;
      
       getAiList();

   }
    function changeorderstatus(v){
       status.value = v;

   }

  onMounted(()=> {
    containerHeight.value = (window.innerHeight - 20)+'px';
    toggleBand('one');
    handleClearButtonVisibility()
    getAiList()
    initWebsocket(()=>{})
  });

  onUnmounted(()=>{
    ws.value.close();
  });
</script>

<style>
  @keyframes slideIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes typing { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }
  .container {
    background-color: #f8f8f8;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
  }
  .left-tools {
    display: flex;
    flex: 1;
    flex-direction: column;
    border-right: 1px solid #eaeaea;
    padding: 12px;
    align-items: center;
  }
  .left-tools>div {
    display: flex;
  }
  .title {
    color: #7f8c8d;
    font-size: 15px;
  }
  .auth-desc {
    margin-top: .5em;
    border-radius: 12px;
    padding: 12px;
    background: #ffffff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #e9ecef;
    color: #546e7a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    font-size: 14px;
    margin-bottom: 25px;
    width: 100%;
  }
  .auth-desc>div{
    display: flex;
    text-align: center;
  }
  .remaining-talks {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #2c3e50;
  }
  .free-talks-note {
    font-size: 12px;
    margin-bottom: 12px;
    color: #7f8c8d;
  }
  .purchase-options-header {
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 8px;
      color: #34495e;
  }
  .purchase-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .purchase-link {
    display: inline-block;
    padding: 6px 12px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border-radius: 16px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(52, 152, 219, 0.2);
  }
  .purchase-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
}
.agent-item.stock.active {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    border-color: #e74c3c;
}
.agent-item.course.active {
    background: linear-gradient(135deg, #f0f8ff 0%, #e8f4fd 100%);
    border-color: #3498db;
}
.agent-item.stock {
    --agent-color: #e74c3c;
}
.agent-item.active {
    box-shadow: 0 0 0 2px var(--agent-color, #3498db), 0 8px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px) scale(1.01);
}
.agent-item {
    background: #ffffff;
    border: 1px solid #e0e6ed;
    border-radius: 18px;
    padding: 22px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.agent-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); transition: left 0.7s; }
.agent-item:hover::before { left: 100%; }
.agent-item:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 10px 20px rgba(0,0,0,0.08); }
.agent-item.active { box-shadow: 0 0 0 2px var(--agent-color, #3498db), 0 8px 20px rgba(0,0,0,0.1); transform: translateY(-2px) scale(1.01); }
.agent-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
}
.agent-desc {
    font-size: 13.5px;
    color: #546e7a;
    line-height: 1.55;
    margin-top: 10px;
}
.agent-features {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.agent-item.stock .agent-avatar {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}
.agent-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    font-weight: 600;
}
.agent-name {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #2c3e50;
}
.agent-item.stock .agent-category {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}
.agent-item.course .agent-avatar {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}
.agent-category {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 8px;
    display: inline-block;
}
.feature-tag {
    font-size: 10.5px;
    padding: 4px 9px;
    border-radius: 16px;
    background: #edf2f7;
    color: #4a5568;
    border: 1px solid #e2e8f0;
}
.agent-item.course .agent-category {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
}
  .right-chart {
    display: flex;
    flex:3;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  #remainingTalksCount {
    color: #e74c3c;
    font-weight: 700;
  }

.chat-area {
    background: #ffffff;
    flex:1;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border: 1px solid #e9ecef;
    box-sizing: border-box;
}
.chat-header {
    padding: 22px 30px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
    height: 110px;
    box-sizing: border-box;
}

.chat-messages {
    padding: 28px;
    overflow-y: scroll;
    flex-direction: column;
    background: #fafbfc;
    box-sizing: border-box;
    height: calc(100% - 200px);
}

.chat-input-area {
    padding: 20px 30px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.03);
    height: 100px;
    width: 100%;
    box-sizing: border-box;

}

.current-agent {
    display: flex;
    align-items: center;
    gap: 18px;
}
.current-agent-avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    font-weight: 600;
}
.current-agent-info h3 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 3px;
    color: #2c3e50;
}
.current-agent-info p {
    font-size: 13.5px;
    color: #7f8c8d;
}
.status-indicator {
    width: 10px;
    height: 10px;
    background: #27ae60;
    border-radius: 50%;
    margin-left: auto;
    animation: pulse 2s infinite;
    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7);
}

.message {
    display: flex;
    gap: 14px;
    animation: slideIn 0.35s ease-out;
    max-width: 85%;
    margin: 12px 0;
}
.typing-indicator { display: flex; align-items: center; gap: 14px; padding: 10px; animation: slideIn 0.35s ease-out; }
.typing-indicator .message-avatar { width: 38px; height: 38px; }
.typing-indicator-dots { display: flex; align-items: center; background: #ffffff; border: 1px solid #e9ecef; padding: 12px 18px; border-radius: 18px; border-bottom-left-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.typing-indicator-dots span { height: 8px; width: 8px; margin: 0 2px; background-color: #bdc3c7; border-radius: 50%; display: inline-block; animation: typing 1.4s infinite ease-in-out both; }
.typing-indicator-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator-dots span:nth-child(2) { animation-delay: -0.16s; }
.message.user {
    margin-left: auto;
    flex-direction: row-reverse;
}
.message.user .message-avatar {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}
.message.user .message-content {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    color: white;
    border-bottom-right-radius: 6px;
}
.message.ai .message-avatar.stock {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}
.message.ai .message-avatar.course {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}
.message-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.message.ai .message-content {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-bottom-left-radius: 6px;
    color: #34495e;
    animation: slideIn 0.35s ease-out;
    gap: 14;
}
.message-content {
    padding: 14px 18px;
    border-radius: 18px;
    position: relative;
    font-size: 14.5px;
    line-height: 1.65;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    animation: slideIn 0.35s ease-out;
    gap: 14;
}

.input-container {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    max-width: 1000px;
    margin: 0 auto;
}
.input-wrapper {
    flex: 1;
    position: relative;
}
.send-button {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.2);
}
.chat-input {
    width: 100%;
    min-height: 50px;
    max-height: 150px;
    padding: 13px 45px 13px 20px;
    border: 1px solid #dde2e8;
    border-radius: 25px;
    background: #ffffff;
    color: #2c3e50;
    font-size: 14.5px;
    resize: none;
    outline: none;
    transition: all 0.25s ease;
    font-family: inherit;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}
.chat-input:focus { border-color: #3498db; background: #ffffff; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15), 0 2px 8px rgba(0,0,0,0.05); }
.chat-input::placeholder { color: #a0aec0; }
.clear-input-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: #e2e8f0;
    color: #718096;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.chat-input:not(:placeholder-shown) + .clear-input-btn { opacity: 1; pointer-events: auto; }
.clear-input-btn:hover { background: #cbd5e0; color: #4a5568; }
.send-button {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.2);
}
.send-button svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.send-button:hover { transform: scale(1.05); box-shadow: 0 6px 15px rgba(52, 152, 219, 0.3); }
.send-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
</style>